// type: 不写默认蓝边框白背景 ; bule 蓝色底 ; stop 禁用状态 不可点击 // height:按钮高度 默认80rpx ; // width:按钮宽度 默认90% ; //
fontSize：按钮中字体大小 默认27rpx; isTap 禁用状态下是否可点击
<template>
    <van-button @click="$emit('click')" :style="btnCustomStyle" :disabled="disabled || isDisabled" :type="type" :size="size" :loading="loading">
        <slot></slot>
    </van-button>
</template>

<script>
export default {
    props: {
        height: String,
        fontSize: String,
        width: String,
        type: {
            type: String,
            default: 'scTheme',
        },
        size: {
            type: String,
            default: 'large',
        },
        color: String,
        borderColor: {
            type: String,
            default: '#fff',
        },
        background: String,
        isTap: Boolean,
        disabled: Boolean,
        loading: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            isDisabled: false, //是否禁用
        }
    },
    methods: {},
    computed: {
        btnCustomStyle() {
            const defaultStyle = {
                width: this.width || '315px',
                height: this.height || '52px',
                'font-size': this.fontSize || '20px',
                color: this.color || '#ffffff',
                'letter-spacing': '1px',
                border: this.borderColor ? `1px solid ${this.borderColor}` : '',
                'border-radius': '8px',
                background: this.background || 'linear-gradient(136deg, #6DB6FF 0%, #349AFF 100%)',
            }
            const banStyle = {
                width: this.width || '315px',
                height: this.height || '52px',
                'font-size': this.fontSize || '20px',
                color: this.color || '#484848',
                'letter-spacing': '1px',
                border: this.borderColor ? `1px solid ${this.borderColor}` : '',
                'border-radius': '8px',
                background: this.background || '#F5F5F5',
                // "box-shadow": "0px 3px 6px rgba(0, 0, 0, 0.16)",
            }

            let outPut = defaultStyle
            this.isDisabled = false

            switch (this.type) {
                case 'stop':
                    // this.isDisabled = this.isTap ? false : true; //禁用按钮点击
                    outPut = banStyle
                    break
                case 'scTheme':
                    // this.isDisabled = this.isTap ? false : true; //禁用按钮点击
                    outPut = defaultStyle
                    break
                default:
                    outPut = {
                        width: this.width || '315px',
                        height: this.height || '52px',
                        'font-size': this.fontSize || '20px',
                        'letter-spacing': '1px',
                        'border-radius': '8px',
                    }
            }
            // if (this.size) {
            //     delete outPut.width
            //     delete outPut.height
            //     delete outPut['font-size']
            //     outPut['border-radius'] = '4px'
            // }
            return outPut
        },
    },
}
</script>
<style lang="less" scoped></style>
